<template>
  <div class="cate">
    <div class="left"><van-sidebar v-model="active" class="slidebar" @change="onChange">
   <van-sidebar-item :title="item.name" class="sidebar1" v-for="item in categoryList" :key="item.id" />
  
</van-sidebar></div>
<div class="right">
                <div class="item" v-for="item in goodsList" :key="item.id" ><img :src="item.pic" alt="">
                    <p>{{item.name}}</p>
                    <div>￥{{item.minPrice}}</div>
                </div>
                
               
            </div>
<TabBar></TabBar>
  </div>
</template>
<script lang="ts" setup >
import { ref } from 'vue';
import TabBar from '@/components/TabBar.vue';
import request from "../../utils/request"
const active = ref(0);
   let categoryList:any=ref([])
   function getCategorylist(i:any){
        request({
url:"/shop/goods/category/all",
         }).then((res:any)=>{
            console.log(res)
            if(res.code===0){
                categoryList.value=res.data
               getGoodslist(res.data[i].id)
            }
         })
   }
   let goodsList:any=ref([])
  function getGoodslist(id:any){
    request({
      url:"/shop/goods/list/v2",
      method:"post",
      data:{categoryId:id}
    }).then((res:any)=>{
      console.log(res)
       if(res.code===0){
        goodsList.value=res.data.result
console.log(active)
       }
    })
  }
  const onChange = (index:any) => {
    getCategorylist(index)
 };
 getCategorylist(0)
 
</script>
<style lang="scss" scoped>
.cate{width: 375px;display: flex;height: 100vh;}
.slidebar{width: 100px;}
.sidebar1{width: 100%;height: 60px;}
.right {
    width: 275px;
    height: 100%;
    overflow: auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: flex-start;
}

.right .item {
    width:127px;
    height: 200px;
    
}

.right .item img {
    width: 100%;
    height:127px;
}

.right .item p {
    width: 107px;
    height: 36px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: auto;
}

.right .item div {
    color: #1ba784;
    font-size: 14px;
    margin-top: 15px;
}
</style>